<template>
  <div class="msg">
    <a-row type="flex" class="msg-bhead">
      <a-col :span="2">入住信息</a-col>
    </a-row>
    <a-form
      :form="form"
      class="forms"
      labelAlign="left"
      :labelCol="{span:3}"
      :wrapperCol="{span:8}"
    >
      <a-form-item label="联系手机">
        <a-input
          placeholder="请填写联系手机"
          v-decorator="['phone', { rules: [{ required: true, message: '请输入联系手机！' }] }]"
        />
      </a-form-item>
      <a-form-item label="联系QQ">
        <a-input
          placeholder="请填写联系QQ"
          v-decorator="['qq', { rules: [{ required: true, message: '请输入联系QQ！' }] }]"
        />
      </a-form-item>
      <a-form-item label="联系微信">
        <a-input
          placeholder="请填写联系微信"
          v-decorator="['wechat', { rules: [{ required: true, message: '请输入联系微信！' }] }]"
        />
      </a-form-item>
      <a-form-item label="供货游戏">
        <a-select
          placeholder="请选择供货游戏"
          v-decorator="['list_id', { rules: [{ required: true, message: '请选择供货游戏！' }] }]"
        >
          <a-select-option
            :value="item.list_id"
            v-for="(item,index) in list"
            :key="index"
          >{{item.name}}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 4, offset: 10 }">
        <a-button type="primary" class="btn" @click="onSubmit">提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { GAT_LIST, RECRUIT_PARTNER } from "./server";
export default {
  layout: "main",
  data() {
    return {
      form: this.$form.createForm(this, {
        name: "rz"
      }),
      list: []
    };
  },
  created() {
    GAT_LIST().then(res => {
      if (!res) return;
      this.list = [...res.data.list];
    });
  },
  methods: {
    onSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          RECRUIT_PARTNER({
            phone: this.form.getFieldValue("phone"),
            list_id: this.form.getFieldValue("list_id"),
            qq: this.form.getFieldValue("qq"),
            wechat: this.form.getFieldValue("wechat")
          }).then(res => {
            if (res.code != 200) {
              this.$message.error(res.msg);
            } else {
              this.$message.success(res.msg);
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.msg {
  border: 1px solid #e8e8e8;
  padding: 18px;
  .msg-bhead {
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #f6f6f6;
    border-bottom: 1px solid #e8e8e8;
    margin: -18px -18px 4px -18px;
    font-weight: bold;
  }
  .information {
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #e8e8e8;
    img {
      width: 80px;
      height: 80px;
    }
    .information-n {
      margin-bottom: 14px;
      font-size: 18px;
    }
    .information-q {
      font-size: 12px;
      color: #999;
    }
  }
  .forms {
    margin-top: 24px;

    .y {
      color: #337ab7;
      div:last-child {
        text-align: right;
      }
    }
    .lines {
      border: 1px dashed #e8e8e8;
      margin: 40px 0;
    }
    .all-price {
      height: 38px;
    }
    .new-price {
      height: 36px;
      span {
        color: #0084ff;
        font-size: 16px;
      }
    }
    .btn {
      width: 160px;
      height: 42px;
      color: #fff;
      background: #0084ff;
      border: 0;
      margin-right: 14px;
      margin-top: 20px;
    }
  }
}
</style>